@charset 'utf-8';

@import 'common';


.web{
    width: 100%;
    height: 100%;
    position: relative;
}

html,body{
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: gr(87);
    position: absolute;
    top: 0;
    background: #f7f7f7;
    border-bottom: gr(1) solid #c1c1c1;
}

section{
    width: 100%;
    position: absolute;
    top: gr(88);
    bottom: gr(99);
    overflow-y:scroll ;
    -webkit-overflow-scrolling: touch;
    background: #f3f4f6;
}

footer{
    width: 100%;
    height: gr(99);
    position: absolute;
    bottom: 0;
    border-top: gr(1) solid #c1c1c1;
}


header{ 
    .retreat-btn{
        width: gr(49);
        height: gr(36);
        float: left;
        line-height: gr(36);
        margin-top: gr(17);
        margin-left: gr(30);
        i{
          
            color: #848689;
            font-size: gr(55);
            text-align: center;
            vertical-align: top;
        }
    }
    
    h3{
       width: gr(79);
       height: 100%;
       font-size: gr(33);
       text-align: center;
       color: #333333;
       margin: 0 auto;
       line-height: gr(87);
       font-weight: normal;
    }
}

.product-wrap{
    background: white;
}


.product{
    width: gr(600);
    height: gr(174);
    margin: 0 auto;
    .imgwrap{
        width: gr(120);
        height: gr(118);
        margin-top: gr(24);
        float: left;
        border: gr(1) solid #d7d7d7;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .description{
        width: gr(461);
        height: gr(120);
        margin-top: gr(24);
        float: right;
        .desc-1{
            width: 100%;
            height: gr(70);
            font-size: gr(25);
            color:#333333;
            line-height: gr(38);
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .desc-2{
            font-size: gr(20);
            text-align: left;
            margin-top: gr(29);
            color: #cfcfcf;
        }
    }
}



.size,.cost,.suggest-price{
    width: 100%;
    background: white;
    border-top: gr(1) solid #e3e3e3;
      .inner{
        width: gr(600);
        height: gr(87);
        margin: 0 auto;        
        background: white;
        
        h5{
           font-weight: normal;
           float: left;
           line-height: gr(87);
           font-size: gr(23); 
           color: #333333;
        }
        
        p{
           float: right;
           line-height: gr(87);
           font-size: gr(23); 
           color: #333333;
        }
      }
}

.size{
    margin-top: gr(20);
}

.suggest-price{
    border-bottom: gr(1) solid #e3e3e3;
}


.deal{
    width: 100%;
    height: gr(178);
    background: #fff9e6;
    padding-top: gr(13);
    border-bottom: gr(1) solid #e2dac3;
}



.set-price{
    width: gr(600);
    height: gr(87);
    margin: 0 auto;
    background: white;
    border: gr(1) solid #e2dac3;
    border-radius: gr(5) gr(5);
    
    h5{
       font-weight: normal;
       float: left;
       line-height: gr(87);
       font-size: gr(27); 
       color: #333333;
       margin-left: gr(20);
    }
    
    p{
       float: right;
       line-height: gr(87);
       font-size: gr(27); 
       color: #333333;
       margin-right: gr(20);
       input{
           width: gr(82);
           height: gr(50);
           border: none;
           vertical-align: middle;
           font-size: gr(27); 
       }
       
       input::-webkit-input-placeholder{
           color: #333333;
       }
    }
}


.repertory{
    width: gr(600);
    margin: 0 auto;
    
    h5{
       font-weight: normal;
       float: left;
       line-height: gr(87);
       font-size: gr(23); 
       color: #333333;
    }
    
    p{
       float: right;
       line-height: gr(87);
       font-size: gr(23); 
       color: #333333;
       em{
           color: #d62d31;
           margin-left: gr(14);
       }
    }
}


.save-btn{
    width: gr(270);
    height: gr(70);
    margin: 0 auto;
    border-radius: gr(5) gr(5);
    background: #d62d31;
    margin-top: gr(14);
    a{
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: gr(26);
        color: white;
        text-align: center;
        line-height: gr(70);       
    }
}
